<template>
<view class="container">
  <view class="goodsname">
    <view>
       <text>关于 {{askdata.good.goods_name}} </text>
       的<text>{{askdata.question_total}}</text>个问题
    </view>
  </view>
  <block v-for="(item, index) in asklist" :key="index">
  <!--  data-url="/pages/goods/goodinfo_askinfo/goodinfo_askinfo?goods_id={{good_id}}" -->
    <view @tap="goaskinfo" :data-qid="item.question.qid" :data-goodsid="good_id" class="asklist">
      <view class="ask">
        <text>问</text>{{item.question.content}}
      </view>
      <block v-for="(items, index2) in item.comment" :key="index2">
          <view v-if="item.comment_total>0" class="ask answer">
              <text>答</text>{{items.content}}
          </view>
          <view class="number">
            <text>全部{{item.comment_total}}个回答</text>
            <!-- 有评论时更新时间 -->
            <text v-if="item.comment_total>0">更新于{{items.updatetime}}</text>   
          </view>
       </block>
      <view v-if="item.comment_total==0" class="number">
        <text>全部{{item.comment_total}}个回答</text>
        <!-- 无评论时提问时间 -->
        <text>更新于{{item.question.updatetime}}</text>
      </view>
    </view>
  </block>
  <view class="bottom">
    <textarea placeholder-class="center" :value="content" @input="bindEquipmentId" placeholder="向已买过的人提问"></textarea>
    <view @tap="a">提问</view>
  </view>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
var util = require("../../../utils/util.js");

export default {
  data() {
    return {
      asklist: [],
      //问答列表
      askdata: "",
      //获取到的数据
      good_id: "",
      content: "" //提问内容  

    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    request.get('/api/user/ask_all', {
      data: {
        id: options.goods_id,
        type: 'brief'
      },
      failRollback: true,
      isShowLoading: false,
      success: function (res) {
        var result = res.data.result; // 提问时间

        for (var i in result) {
          result[i].question.updatetime = util.format(result[i].question.createtime, 'yyyy-MM-dd hh:mm');
        } // 更新时间


        for (var i in result) {
          for (var j in result[i].comment) {
            var length = result[i].comment.length; //评论数量

            result[i].comment[j].updatetime = util.format(result[i].comment[j].createtime, 'yyyy-MM-dd hh:mm');
          }
        }

        that.setData({
          asklist: res.data.result,
          askdata: res.data,
          good_id: options.goods_id
        });
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    // textarea值
    bindEquipmentId: function (e) {
      this.setData({
        content: e.detail.value
      });
    },
    // 提问
    a: function (e) {
      var that = this;

      if (!that.content) {
        app.globalData.showTextWarining("请输入提问标题");
        return false;
      }

      request.get('/api/user/askall_ask', {
        data: {
          goods_id: that.good_id,
          content: that.content
        },
        failRollback: true,
        isShowLoading: false,
        success: function (res) {
          app.globalData.showTextWarining("恭喜您，提问成功!");
          that.setData({
            content: ""
          });
        }
      });
    },
    // 问大家
    goaskinfo: function (e) {
      var goodsid = e.currentTarget.dataset.goodsid;
      var qid = e.currentTarget.dataset.qid;
      uni.navigateTo({
        url: '/pages/goods/goodinfo_askinfo/goodinfo_askinfo?goods_id=' + goodsid + '&qid=' + qid
      });
    }
  }
};
</script>
<style>
.container{
  padding-top: 100rpx;
  padding-bottom: 100rpx;
}
.goodsname{
  margin: 0 auto;
  text-align: center;
  font-size: 26rpx;
  color: #999;
  height: 100rpx;
  line-height: 100rpx;
  position: fixed;
  width: 690rpx;
  top: 0;
  padding: 0 30rpx;
  background: #F2F2F2;
  display: flex;
  justify-content: centr;
}
.goodsname>view{
  margin: 0 auto;
  display: flex;
}
.goodsname text:nth-child(1){
  max-width: 540rpx;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.goodsname text:nth-child(2){
  color: #FE7B40;
}
.asklist{
  width: 630rpx;
  margin: 0 30rpx 30rpx;
  background: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asklist .ask{
  font-size: 30rpx;
  margin-bottom: 24rpx;
  width: 650rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asklist .ask text{
  background: #FE7536;
  font-size: 28rpx;
  color: #fff;
  padding: 2rpx;
  margin-right: 14rpx;
  border-radius: 4rpx;
  font-weight: 500;
}
.asklist .answer text{
  background: #04C060;
}
.number{
  color: #999;
  font-size: 22rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bottom{
  position: fixed;
  bottom: 0;
  width: 750rpx;
  height: 100rpx;
  border-top:2rpx solid #f3f3f3;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
  padding: 0 6rpx;
}
.bottom textarea{
  background: #F4F4F4;
  border-radius: 40rpx;
  padding: 6rpx;
  padding-top: 18rpx;
  height: 36rpx;
  font-size: 24rpx;
  width: 490rpx;
  padding-left: 30rpx;
}
.bottom view{
  width: 130rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  color: #fff;
  background: #FEC52B;
  border-radius: 40rpx;
  font-size: 30rpx;
  margin-right: 10rpx;
}
.bottom .center{
  text-align: center;
}
</style>